<template>
    <div
        class="num-control-1"
        :style="{
            background: datas.setStyle.backColor,
            marginTop: datas.setStyle.marginTop + 'px',
            marginBottom: datas.setStyle.marginBottom + 'px',
        }"
    >
        <div class="no-data" v-if="datas.setConfig.attributes.length === 0">
            <span>{{ $t('drag.123456-67') }}</span>
        </div>
        <div class="content" v-else>
            <div class="panel" v-for="item in datas.setConfig.attributes" :key="item.templateId">
                <div class="img" :style="{ backgroundColor: datas.setStyle.iconBackColor }" v-if="datas.setStyle.showIcon">
                    <i :class="item.icon" :style="{ color: datas.setStyle.iconColor }"></i>
                </div>
                <div class="lable" :style="{ color: datas.setStyle.nameColor }">{{ item.templateName }}</div>
                <div class="value" :style="{ color: datas.setStyle.numColor }">
                    <span class="num">{{ item.value || '--' }}</span>
                    <span class="unit">{{ item.unit }}</span>
                </div>
            </div>
        </div>
        <!-- 删除组件 -->
        <slot name="deles" />
        <!-- 服务下发 -->
        <el-dialog title="下发指令" :visible.sync="isShow" append-to-body width="480px">
            <el-form size="medium ">
                <el-form-item :label="currItem.templateName" label-width="120px">
                    <el-input v-model="currItem.value" :precision="0" :controls="false" type="number" style="width: 200px"></el-input>
                    <span v-if="currItem.min && currItem.max" style="margin-left: 5px">（{{ currItem.min }} ~ {{ currItem.max }}）</span>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'numControl1',
    props: {
        datas: Object,
    },
    data() {
        return {
            isShow: false,
            currItem: {},
        };
    },
    methods: {
        // 处理item点击
        handleItemClick(item) {
            this.currItem = item;
            this.isShow = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.num-control-1 {
    position: relative;

    .no-data {
        padding: 20px;
        margin: 12px 20px;
        border: 2px dotted #ddd;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        color: #999;
    }

    .content {
        .panel {
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px 0 20px;
            height: 70px;

            .img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                display: inline-flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #fff;
                background-color: rgb(255, 153, 0);
            }

            .lable {
                margin: 0 10px;
                font-size: 16px;
                line-height: 20px;
                color: #333;
                max-height: 40px;
                min-width: 40px;
                max-width: 120px;
                overflow: hidden;
            }

            .value {
                flex: 1;
                font-size: 20px;
                line-height: 20px;
                color: #444;
                text-align: right;
                min-width: 100px;
                min-height: 20px;
                max-height: 40px;
                overflow: hidden;

                .unit {
                    margin: 0 0 0 4px;
                    font-size: 14px;
                    line-height: 40px;
                }
            }
        }
    }
}
</style>
